<template>
  <div>
    <div class="header">
      <div class="box" >
        <div class="logo">
          <div class="el-image i">
            <img src="@/assets/images/home_logo.png" class="el-image__inner">
          </div>
          <span class="s">综保平台</span></div>
        <div class="user">
          <router-link to="/login" tag="span" class="stex" v-if="!name">登录</router-link>
          <el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
            <div class="avatar-wrapper">
              <img :src="avatar" class="user-avatar">
              <span>{{name}}</span>
              <span class="el-icon-caret-bottom" ></span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/index">
                <el-dropdown-item>进入系统</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click.native="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--          <span-->
          <!--          class="sline">|</span>-->
          <!--          <router-link to="/register" tag="span"-->
          <!--          class="stex">注册</router-link>-->
        </div>
      </div>
      <!--      <div class="nav">-->
      <!--        <ul class="ulist">-->
      <!--          <li class="act"><span class="stex">&lt;!&ndash;&ndash;&gt; 首页 </span>-->
      <!--            <div class="item"></div>-->
      <!--          </li>-->
      <!--          <li class=""><span class="stex">&lt;!&ndash;&ndash;&gt; 通知公告 </span>-->
      <!--            <div class="item"></div>-->
      <!--          </li>-->
      <!--          <li class=""><span class="stex">&lt;!&ndash;&ndash;&gt; 适配资源 </span>-->
      <!--            <div class="item"><p> 适配成果 </p>-->
      <!--              <p> 适配中心 </p>-->
      <!--              <p> 应用解决方案 </p></div>-->
      <!--          </li>-->
      <!--          <li class=""><span class="stex">&lt;!&ndash;&ndash;&gt; 问题中心 </span>-->
      <!--            <div class="item"><p> 问题反馈 </p>-->
      <!--              <p> 问题知识库 </p></div>-->
      <!--          </li>-->
      <!--          <li class=""><span class="stex">&lt;!&ndash;&ndash;&gt; 技术支持 </span>-->
      <!--            <div class="item"><p> 技术文档 </p></div>-->
      <!--          </li>-->
      <!--          <li class=""><span class="stex">&lt;!&ndash;&ndash;&gt; 客服中心 </span>-->
      <!--            <div class="item"></div>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>
    <div class="knowledge_entry_list">
      <p class="tit">
        资源地图</p>
      <ul class="knowledge_card">
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 产品数量 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.count}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 厂商数量 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.manufacturerCount}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 覆盖省级行政区域 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.provinceRegionCount}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 覆盖城市 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.cityRegionCount}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 覆盖行业 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.industryCount}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
        <li class="k_c_item">
          <div class="k_c_name"><img
            src=""
            class="k_c_icon"><span
            class="stex"> 近三个月新增产品 </span></div>
          <div class="number_grow_warp k_c_num">
            <span class="number_grow">{{basicInfo.addMonthCount}}</span>
          </div>
          <!--          <p class="tip">适配成果库总数</p>-->
          <!--          <p class="phover"><span class="stex">详情</span></p>-->
        </li>
      </ul>
    </div>
    <div style="width: 1200px;margin:0 auto;">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="24" :md="16">
          <div class="map-chart" ref="mapChart"></div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8">
          <div class="pie-chart" ref="pieChart"></div>
          <div class="line-chart" ref="lineChart"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import china from "./info/baseStatistics/china.json";
import {mapGetters} from "vuex";
import request from "../utils/request";

export default {
  name: "home",
  data(){
    return {
      basicInfo:{
        addMonthCount: 0,
        cityRegionCount:0,
        count : 0,
        industryCount : 0,
        manufacturerCount:0,
        provinceRegionCount: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ]),
  },
  mounted() {
    request({
      url: '/home/basicInfo',
      headers: {
        isToken: false
      },
      method: 'get'
    }).then(res=>{
      this.basicInfo = res.data;
    })
    this.pieChartRender();

    this.lineChartRender();

    // 地图数据
    this.mapChartRender();
  },
  methods: {
    // 饼图
    pieChartRender() {
      var myChart = echarts.init(this.$refs.pieChart);
      request({
        url:"/home/industryInfo",
        headers: {
          isToken: false
        },
        method: 'get'
      }).then(res=>{
        var option;
        option = {
          title: {
            text: '行业分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: '行业分布',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                formatter: "{b}:{c}"
              },
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              data: res.data.map(item => ({
                value: item.count,
                name: item.dictLabel
              }))
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        })
      })


    },
    // 地图统计
    mapChartRender() {
      echarts.registerMap('china', china)
      var myChart = echarts.init(this.$refs.mapChart);
      request({
        url:"/home/regionProvinceInfo",
        headers: {
          isToken: false
        },
        method: 'get'
      }).then(res=>{
        const data = res.data.map(item=>{
          return {
            name:item.province.slice(0,2),
            value:item.count
          }
        })
        var option = {
          tooltip: {
            trigger: 'item',
            formatter(params) {
              console.log(params)
              return params.name + ": " + (params.data ? params.data.value : '-')
            }
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 0,
            // text: ["高", "低"],
            type: "piecewise",
            pieces: [
              {
                max: 30,
                color: "#edfbfb",
              },
              {
                min: 30,
                max: 60,
                color: "#b7d6f3",
              },
              {
                min: 60,
                max: 90,
                color: "#40a9ed",
              },
              {
                min: 90,
                max: 120,
                color: "#3598c1",
              },
              {
                min: 120,
                max: 150,
                color: "#215096",
              },
            ],
            show: true,
          },
          geo: {
            map: "china",
            roam: false,
            scaleLimit: {
              min: 1,
              max: 2,
            },
            left: 50,
            zoom: 1.23,
            label: {
              normal: {
                show: true,
                fontSize: "12",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                //shadowBlur: 50,
                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              name: "企业供货产品类型分布",
              type: "map",
              geoIndex: 0,
              selectedMode: false,
              data: data,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        })
      })



    },
    // 折线图统计
    lineChartRender() {
      var myChart = echarts.init(this.$refs.lineChart);
      var option;
      request({
        url:"/home/regionInfo",
        headers: {
          isToken: false
        },
        method: 'get'
      }).then(res=>{

        option = {
          tooltip: {
            trigger: "axis"
          },
          //标题
          title: {
            text: '区域分布',
            left: 'center',
          },
          //图表离容器的距离
          grid: {
            left: "10%",
            top: "20%",
            right: "10%",
            bottom: "10%",
          },
          //X轴
          xAxis: {
            data: res.data.map(item=>item.city),
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 12
              }
            },
            axisTick: {
              show: false//隐藏X轴刻度尺
            },
          },
          //y轴
          yAxis: {
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: 16
              }
            }
          },
          series: [{
            data: res.data.map(item=>item.count),
            label: {
              show: true,
              position: "top",
              distance: 0,
              color: "grey",
            },
            name: '区域分布',
            //图表类型
            //折线图line,饼图pie，散点图scatter等等
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              //barBorderRadius:[20,20,0,0],
              color: {
                x: 0,//右
                y: 0,//下
                x2: 0,//左
                y2: 1,//上
                colorStops: [
                  {
                    offset: 0.1,
                    color: '#00B4DB'//0%处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0083B0'//100%处的颜色
                  }
                ]
              }
            }
          }]
        }
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        })
      })

    },
    // 退出登录
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          // location.href = '/index';
          window.location.reload();
        })
      }).catch(() => {});
    }
  }
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  background: url("../assets/images/home_header_bg.png") no-repeat center;
}

.header .box {
  width: 1200px;
  margin: 0 auto;
  height: 90px;
  padding:  0 10px;
}

.header .box .logo {
  float: left;
  width: auto;
  height: 90px;
  line-height: 90px;
  cursor: pointer
}

.header .box .logo .i {
  float: left;
  margin-top: 20px;
  height: 50px;
  width: 56px;
  margin-right: 8px
}

.header .box .logo .s {
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 28px;
  font-weight: 700;
  color: #fff
}

.header .box .user {
  float: right;
  width: auto;
  display: flex;
  align-items: center;
  height: 44px;
  line-height: 44px;
  margin-top: 23px
}

.header .box .user .i {
  float: left;
  width: 44px;
  height: 44px;
  margin-right: 8px;
  border-radius: 22px;
  overflow: hidden
}

.header .box .user .s {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  max-width: 270px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 18px
}

.header .box .user .s.s2 {
  max-width: 150px
}

.header .box .user .s.company-name {
  margin-top: 4px;
  font-size: 14px
}

.header .box .user .stex {
  font-size: 14px;
  font-family: PingFangSC-Medium\, PingFang SC;
  color: #fff;
  cursor: pointer
}

.header .box .user .sline {
  margin: 0 6px;
  color: #fff
}

.header .nav {
  width: 100%;
  height: auto;
  position: relative
}

.header .nav .ulist {
  width: 1200px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  padding: 0;
  list-style: none
}

.header .nav .ulist li {
  float: left;
  width: 150px;
  height: auto;
  line-height: 50px;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #fff;
  margin-right: 10px;
  cursor: pointer;
  position: relative
}

.header .nav .ulist li .stex {
  display: inline-block;
  height: 46px;
  line-height: 50px;
  border-bottom: 4px solid transparent
}

.header .nav .ulist li .stex .hot {
  width: 28px;
  vertical-align: text-bottom
}

.header .nav .ulist li .dis {
  color: #ccc
}

.header .nav .ulist li .item {
  display: none;
  position: absolute;
  left: 0;
  top: 46px;
  z-index: 99;
  width: 140px;
  background: #fff;
  margin-right: 10px
}

.header .nav .ulist li .item p {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #333
}

.header .nav .ulist li .item p:hover {
  cursor: pointer;
  color: #fff;
  background: #254eb1
}

.header .nav .ulist li .act {
  transition: all .4s ease;
  display: block
}

.header .nav .ulist li:hover .stex {
  font-weight: 700;
  border-bottom: 4px solid #fff
}

.header .nav .ulist li:hover .dis {
  font-weight: 400;
  color: #ccc
}

.header .nav .ulist .act .stex {
  font-weight: 700;
  border-bottom: 4px solid #fff
}


.knowledge_entry_list {
  margin-top: 30px;
  overflow: hidden
}

.knowledge_entry_list .tit {
  width: 1200px;
  height: 30px;
  line-height: 30px;
  color: #333;
  font-size: 22px;
  position: relative;
  margin: 40px auto 20px;
  padding-left: 12px;
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500
}

.knowledge_entry_list .tit:after {
  content: "";
  width: 4px;
  height: 20px;
  background-color: #254eb1;
  position: absolute;
  left: 0;
  bottom: calc(50% - 10px);
  border-radius: 1px
}

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.clearfix {
  *zoom: 1
}

ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.knowledge_card {
  width: 1200px;
  margin: 0 auto 40px;
  padding: 0;
  display: flex;
  justify-content: space-between
}

.knowledge_card .k_c_item {
  flex: 1;
  background: linear-gradient(90deg, #0a93eb, #1572db);
  border-radius: 2px;
  padding: 20px;
  margin-right: 10px;
  box-sizing: border-box;
  position: relative
}

.knowledge_card .k_c_item .k_c_name {
  width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden
}

.knowledge_card .k_c_item .k_c_name .k_c_icon {
  margin-top: 3px;
  width: auto;
  height: 24px;
  float: left
}

.knowledge_card .k_c_item .k_c_name .stex {
  margin-left: 10px;
  font-weight: 500;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #fff;
  line-height: 22px
}

.knowledge_card .k_c_item .k_c_name .dis {
  color: #ccc
}

.knowledge_card .k_c_item .k_c_num {
  margin-top: 30px;
  height: 38px;
  line-height: 38px;
  color: #fff;
  font-size: 26px;
  text-align: center
}

.knowledge_card .k_c_item .k_c_num .number_grow {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff
}

.knowledge_card .k_c_item .tip {
  width: 100%;
  text-align: center;
  margin: 8px 0 0;
  font-size: 14px;
  color: #fff
}

.knowledge_card .k_c_item .phover {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 208px;
  margin: 0
}

.knowledge_card .k_c_item .phover .stex {
  display: block;
  width: 120px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #fff;
  color: #1377dd;
  font-family: PingFangSC-Medium\, PingFang SC;
  margin: 82px auto 0;
  cursor: pointer;
  border-radius: 6px
}

.knowledge_card .k_c_item:hover .phover {
  display: block;
  background: rgba(13, 56, 109, .5)
}

.knowledge_card .noMar {
  margin-right: 0
}

.map-chart {
  width: 100%;
  height: 510px;
}

.pie-chart {
  width: 100%;
  height: 250px;
  margin-bottom: 10px;
}

.line-chart {
  width: 100%;
  height: 250px;
}
.avatar-wrapper{
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right:4px;
}
.avatar-wrapper>span{
  color:#fff;
}
.avatar-wrapper>span:first-of-type{
  margin-right:4px;
}
</style>
